<template>
  <el-dialog :title="menuForm.id==0?'新增':'修改'" :visible.sync="show_flag.status">
    <el-form ref="menuForm" :model="menuForm" label-width="60px" :rules="rules">
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="menuForm.type">
          <el-radio :label="1">目录</el-radio>
          <el-radio :label="2">菜单</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="上级" v-if="menuForm.type == 2">
        <el-select v-model="menuForm.pid" placeholder="选择活动区域">
          <el-option label="顶级菜单" value="0"></el-option>
          <el-option label="系统设置" value="1"></el-option>
          <el-option label="商城管理" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="名称" prop="title">
        <el-input v-model="menuForm.title" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="图标" v-if="menuForm.type == 1">
        <el-input v-model="menuForm.icon" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="地址" v-if="menuForm.type == 2">
        <el-input v-model="menuForm.url" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="menuForm.status">
          <el-radio :label="1"> 正常</el-radio>
          <el-radio :label="0"> 禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitMenu">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ["show_flag"],

  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      menuForm: {
        id:0,
        pid: "",
        title: "",
        icon: "",
        type: "1",
        url: "",
        status: "",
      },
      rules: {
        type: {
          required: true,
          message: "类型名不可以为空",
          trigger: "blur",
        },
        title: {
          required: true,
          message: "名称不可以为空",
          trigger: "blur",
        },
        status: {
          required: true,
          message: "状态不可以为空",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    submitMenu() {
      this.$refs["menuForm"].validate((valid) => {
        if (valid) {
          const url=this.menuForm .id ==0?"/menuadd":"/menuedit"//菜单修改
          this.$http
            .post(url, this.menuForm)
            .then((res) => {
              // 修改
              if (res.status == "200") {
                this.menuForm = {
                  // id:0,
                  pid: "",
                  title: "",
                  icon: "",
                  type: "1",
                  url: "",
                  status: "",
                };
                // 关闭模态框
                this.show_flag.status = false
                // 通知父组件刷新列表
                this.$emit("updataMenu")
              }
            });
        }
      });
    },
  },
};
</script>

<style>
</style>